<template>
	<div>
		<div class="head">
			<a @click="$router.push({path: '/Address'})" class="return"></a>
			<span>{{$t('AddAddress.v1')}}</span>
		</div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<van-cell-group>
					<van-field v-model="userName" :label="$t('AddAddress.v2')" :placeholder="$t('AddAddress.v3')" maxlength="20"/>
					<van-field v-model="phone" maxlength="11" :label="$t('AddAddress.v4')" :placeholder="$t('AddAddress.v5')" />
					<van-field v-model="address" :label="$t('AddAddress.v6')" disabled :placeholder="$t('AddAddress.v7')" right-icon="arrow" @click.native="typeDate" />
					<van-field v-model="message" :label="$t('AddAddress.v8')" type="textarea" :placeholder="$t('AddAddress.v9')" rows="2" autosize />
					<van-switch-cell v-model="checked" @input="onInput" active-color="#3ca76d" :title="$t('AddAddress.v10')" />
				</van-cell-group>
				<div style="margin:20px;">
					<van-button type="primary" size="normal" :show-loading="loading" :disabled='loading' style="background:#3ca76d; margin-bottom:20px;" @click="save">{{$t('AddAddress.v11')}}</van-button>
				</div>

			</div>
		</div>
		<!-- 地区选择 -->
		<van-popup v-model="show" position="bottom">
			<van-area :area-list="areaList" @confirm="typeDateOk" @cancel="typeDateUnOk" />
		</van-popup>
	</div>
</template>

<script>
	import { Toast } from 'vant';
	import areaList from '../../utils/area';
	import { recreation } from './../../utils/api';
	export default {
		data() {
			return {
				checked: false,
				show: false,
				areaList,
				userName: '',
				phone: '',
				message: '',
				value: '',
				valtype: '',
				address: '',
				province: '',
				city: '',
				district: '',
				isDefault: 0,
				loading: false,
			}
		},
		mounted() {

		},
		methods: {
			save() { //保存地址
				if(!this.userName) {
					this.$vux.toast.text(this.$t('AddAddress.v12'));
					return false;
				}
				if(!this.phone) {
					this.$vux.toast.text(this.$t('AddAddress.v13'));
					return false;
				}
				if(!this.address) {
					this.$vux.toast.text(this.$t('AddAddress.v14'));
					return false;
				}
				if(!this.message) {
					this.$vux.toast.text(this.$t('AddAddress.v15'));
					return false;
				}
				this.loading = true;
				recreation.getAdd({
					'username': this.userName,
					'phoneNumber': this.phone,
					'province': this.province,
					'city': this.city,
					'district': this.district,
					'street': this.message,
					'isDefault': this.isDefault
				}).then(res => {
					if(res.code == 200) {
						this.$router.push({
							path: '/Address'
						})
						this.loading = false;
					} else if(res.code == 500) {
						this.loading = false;
					}
					Toast({
						duration: 1000,
						message: res.msg
					});
				})

			},
			typeDate() {
				this.show = true;
			},
			typeDateOk(val) {
				this.address = val[0].name + ',' + val[1].name + ',' + val[2].name;
				this.valtype = val[0].code + ',' + val[1].code + ',' + val[2].code
				this.province = val[0].name
				this.city = val[1].name
				this.district = val[2].name

				this.show = false;
				console.log(val)
			},
			typeDateUnOk() {
				this.show = false;
			},
			onInput(checked) { //1默认地址 0不是默认地址
				if(checked) {
					this.isDefault = 1
				} else {
					this.isDefault = 0
				}
			}

		}
	}
</script>

<style lang="less" scoped="scoped">
	.overlay {
		background: rgb(245, 245, 245);
	}

	.head {
		background: white;
		color: black;
	}

	.head .return:after {
		border-color: #000;
	}

	/deep/.van-field__control:disabled {
		color: black!important;
	}

	.van-cell {
		background: white;
	}

	/deep/ .van-field__control {
		color: black!important;
	}
</style>
